<template>
  <div>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-user-solid"></i>
            <span slot="title">班主任</span>
          </template>
          <el-menu-item-group v-for="item in sidebarData" :key="item.id">
            <span slot="title" v-text="item.address"></span>
            <el-menu-item
              v-for="tea in item.teacher"
              :key="tea.id"
              :index="tea.id.toString()"
              v-show="position==2 || position==1 || tea.username==username"
              @click="table(0,tea.username)"
            >
              <template slot="title">{{tea.username}}</template>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span slot="title">项目经理</span>
          </template>
          <el-menu-item-group v-for="item in sidebarData" :key="item.id">
            <span slot="title" v-text="item.address"></span>
            <el-menu-item
              v-for="man in item.manager"
              :key="man.id"
              :index="man.id.toString()"
              v-show="position==2 || position==0 || man.username==username"
              @click="table(1,man.username)"
            >
              <template slot="title">{{man.username}}</template>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">学员管理</span>
          </template>
          <el-menu-item-group>
            <span slot="title">学员管理</span>
            <el-menu-item index="3-1" @click="followup">跟进情况</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <span slot="title">未回访</span>
            <el-menu-item index="3-2" @click="nofollowup">未回访学员</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <span slot="title">首访情况</span>
            <el-menu-item index="3-3" @click="tall">学员首访</el-menu-item>
            <el-menu-item index="3-4" @click="intention">学员意向</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="10" @click="dashboard">
          <i class="el-icon-s-marketing"></i>
          <span slot="title">数据分析</span>
        </el-menu-item>
        <el-menu-item index="11" @click="permission" v-if="position==2">
          <i class="el-icon-user"></i>
          <span slot="title">员工管理</span>
        </el-menu-item>
        <el-menu-item index="12"  @click="shimo">
          <i class="el-icon-document"></i>
          <span slot="title">石墨文档</span>
        </el-menu-item>
        <el-menu-item index="13" disabled>
          <i class="el-icon-loading"></i>
          <span slot="title">功能研发中...</span>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import variables from "@/styles/variables.scss";

export default {
  name: "Sidebar",
  data() {
    return {
      sidebarData: [],
      username: "",
      position: 0
    };
  },
  created() {
    this.username = localStorage.getItem("username");
    this.position = localStorage.getItem("position");
    this.axios.get("/user").then(res => {
      for (var i = 0; i < res.data.length; i++) {
        this.sidebarData = res.data;
      }
    });
  },
  methods: {
    table(position, username) {
      localStorage.setItem("table", JSON.stringify({ position, username }));
      this.$router.push({
        name: "table",
        query: {
          name: username
        }
      });
    },
    dashboard() {
      this.$router.push("/main/dashboard");
    },
    permission() {
      this.$router.push("/main/permission");
    },
    followup() {
      this.$router.push("/main/followup");
    },
    nofollowup() {
      this.$router.push("/main/nofollowup");
    },
    tall() {
      this.$router.push("/main/tall");
    },
    intention() {
      this.$router.push("/main/intention");
    },
    shimo() {
      this.$router.push("/main/shimo");
    }
  },
  computed: {
    ...mapGetters(["sidebar"]),
    variables() {
      return variables;
    },
    isCollapse() {
      return !this.sidebar.opened;
    }
  }
};
</script>
<style>
.el-menu--collapse {
  margin-left: 15px;
  text-align: left !important;
}
.el-scrollbar__view > ul.el-menu > li.el-submenu > div.el-submenu__title {
  padding-left: 15px !important;
}
.el-tooltip {
  padding: 0 !important;
}
.el-menu-item {
  padding-left: 15px !important;
}
#app .sidebar-container .submenu-title-noDropdown:hover,
#app .sidebar-container .el-submenu__title:hover {
  background-color: #304156 !important;
}
ul > li > ul > li > ul > li.el-menu-item {
  padding-left: 40px !important;
}
</style>

<style scoped>
.el-menu-item:hover {
  background-color: #304156 !important;
}
</style>